<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ByteDance</title>
    <link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="favicon.ico" rel="shortcut icon" type="image/ong">
    <style type="text/css">
        /* 通用样式 */
        a {
            text-decoration: none;
            color: #fff;
        }
        p {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0;
            margin-inline-start: 0;
        }
        body,html {
            margin: 0px;
            padding: 0px;
        }
        /* 整体样式 */
        .wrapper {
            background-image: url("home-banner.fe94fcec.jpg");
            width: 100%;
            height: 743px;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 50% 50%;
            overflow: hidden;
            color: #fff;
            margin: 0px;
            font-weight: 400;
        }
        /* 导航条部分 */
        .nav-bar {
            height: 88px;
            width: 100%;
            display: flex;
            align-items: center;
            overflow: hidden;
        }
        .head-left{
            margin-left: 79px;
            width: 130px;
            align-items: center;
        }
        .head-right {
            align-items: center;
            display: flex;
            margin-left: 690px;
            font-size: 13px;
            line-height: 31px;
        }
        .link {
            margin-top: 26px;
            margin-right: 50px;
            margin-bottom: 25px;
            color: #f8f9fb;
            font-weight: 500;
            padding: 0px;
        }
        .language {
            margin-left: 20px;
        }
        /* 主体部分 */
        .body {
            margin:220px auto 0px;
            color: #fff;
            text-align: center;
        }
        .contain {
            margin:20px auto 0px;
            font-size: 16px;
            font-weight: 500;
            width: 773px;
            line-height: 2;
        }
        .know {
            margin-top: 20px;
            color: rgb(255, 255, 255);
            height :17px;
            font-size: 14px;
            font-weight: 600;
        }
        .next {
            margin-top: 97px;
            color: #fff;
        }
        #right {
            margin-left: 80px;
            margin-top: 130px;
            font-size: 13px;
            font-weight: 400;
            line-height: 20px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <!-- 前面导航条部分 -->
        <div class="nav-bar" >
            <!-- 导航条左边logo部分 -->
           <a href="https://www.bytedance.com/" style="float: left"><img src="zh-logo-white.da4a7563.png"class="head-left" ></a>
            <!-- 导航条右边超链接部分 -->
            <div class="head-right">
                <a href="https://www.bytedance.com/zh" style="border-bottom: 2px solid #f8f7fb" class="link"><span>主页</span></a>
                <a href=https://www.bytedance.com/zh/about"  class="link"><span>关于我们</span></a>
                <a href="https://www.bytedance.com/zh/corporate"  class="link"><span>企业社会责任</span></a>
                <a href="https://www.bytedance.com/zh/news"  class="link"><span>媒体报道</span></a>
                <a href="https://www.bytedance.com/zh/careers"  class="link"><span>加入我们</span></a>
                <a href="https://www.bytedance.com/zh/careers"  class="language link"><span>中</span></a>
            </div>
        </div>
        <!-- 主体部分 -->
        <div class="body">
            <!-- 文字 -->
            <div class="contain">
                <p>字节跳动成立于2012年3月，目前公司的产品和服务已覆盖全球150个国家和地区、75个语种，在40多个国家和地区位居应用商店总榜前列</p>
            </div>
            <!-- know more -->
            <a target="_blank" href="https://www.bytedance.com/zh/about" style="width: 72px;height: 41px;margin: 0 auto">
                <div class="know">
                    <span style="vertical-align: center">了解更多</span>&nbsp;
                    <span class="fa fa-caret-right" aria-hidden="true"></span>
                </div>
            </a>
            <!-- next page -->
            <div class="next">
                <img src="nextpage.png" style="margin:13px auto 0;width: 41px;height:37px;">
            </div>
        </div>
        <div id="right">
            <span>© 2012-2020 字节跳动</span>
        </div>
    </div>
</body>
</html>